<template>
    <div class="container">
        <el-main>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>用户登录</span>
                </div>
                <el-form ref="loginForm" :rules="rules" :model="loginForm">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="loginForm.username"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="loginForm.password"></el-input>
                        </el-form-item>
                        <div id="role-choose">
                            <el-radio v-model="radio" label="0">学生/教师/企业用户</el-radio>
                            <el-radio v-model="radio" label="3">库管理员</el-radio>
                            <el-radio v-model="radio" label="4">系统管理员</el-radio>
                        </div>
                        <el-form-item>
                            <el-button type="primary" @click="login">登录</el-button>
                            <el-button @click="reset">重置</el-button>
                        </el-form-item>
                        <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
                        没有账号？<el-link type="primary" @click="changeType">注册</el-link>
                </el-form>
            </el-card>
        </el-main>
    </div>
</template>
<script>
import axios from 'axios'

export default {
    name:'LoginBox',
    data(){
        return{
            loginForm:{
                username :'',
                password :''
            },
            rules:{
                username:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 8, max: 30, message: '长度在 8 到 30 个字符', trigger: 'blur' }
                ]
            },
            radio: '0'
        }
    },
    methods:{
        login:function(){
            this.$refs.loginForm.validate(async (valid) => {
                if(!valid) return;
                try{
                    let data = {
                        'loginInfo':this.$data.loginForm,
                        'type':this.$data.radio
                    }
                    const res = await axios.post('/api/auth/login',data);
                    console.log(res);
                    if(res.status!==200) return this.$message.error("登录失败，请检查用户名和密码是否正确！");
                    if(res.data.res.ok === 1){
                        this.$message.success(res.data.res.msg+"，即将重定向");
                        // 登录成功后将token保存到客户端的sessionStorage中 res.data.token
                        // this.$store.commit('toLogin',res.data.token);
                        // 通过编程式导航跳转到后台主页，路由地址是/home
                        data = {
                            'token':res.data.res.token,
                            'username':res.data.res.username,
                            'uid':res.data.res.uid,
                            'type':res.data.res.type,
                            'role':res.data.res.role,
                            'isLogin':true
                        }
                        this.$store.commit('storeToken',data);
                        if(this.$data.radio !== '0'){
                            this.$router.push('/admin');
                        }else{
                            this.$router.push('/');
                        }
                    }else{
                        this.$message.error(res.data.res.msg);
                    }
                }catch(e){
                    console.log(e);
                    this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
                    // 测试token
                    //this.$store.commit('toLogin',"apple");
                }
            })
        },
        reset:function(){
            this.$refs.loginForm.resetFields();
        },
        changeType:function(){
            this.$emit("changeType","RegisterBox");
        }
    }
}
</script>
<style lang="scss" scoped>
.container{
    // width: 100%;
    // height: 90%;
    // background-color: #eee;
    // padding-top:40px;
    // padding-bottom:20px;
    // box-sizing: border-box;
    background-image: url("~@/assets/pics/login-bg.png");
}
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
    margin: 0 auto;
  }
/deep/ .el-main{
    width:100%;
    // height: 100%;
}
#role-choose{
    margin-bottom: 20px;
}
</style>